<template>
    <div class="container">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" size="default" status-icon>
            <p>叩丁狼商品管理系统</p>
            <el-form-item prop="name">
                <el-input v-model="ruleForm.name" clearable placeholder="请输入账号" :prefix-icon="UserFilled" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="ruleForm.password" clearable placeholder="请输入密码"
                    :prefix-icon="Lock" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm" style="width: 100%;">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { UserFilled, Lock } from '@element-plus/icons-vue'
// import axios from 'axios'
// import qs from "qs"
import * as api from "@/request/api"
import Cookies from 'js-cookie'
// import { useMenusStore } from "@/stores/menus";
import { useRouter } from "vue-router"
let router = useRouter() //生成路由的实例
// useMenusStore
const ruleFormRef = ref<FormInstance>()
// console.log(111, ruleFormRef);

const ruleForm = reactive({
    name: 'syy',
    password: "123456"
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ]
})
const submitForm = () => {
    if (ruleFormRef.value) {
        ruleFormRef.value.validate(async (valid, fields) => {
            // console.log(valid);
            if (valid) {
                // 登录发请求
                // 普通  request payload
                let result = await api.admin.adminLogin({
                    password: ruleForm.password,
                    username: ruleForm.name
                })
                // Form Data  表单
                // let form = new FormData();
                // form.append("password", ruleForm.password);
                // form.append("username", ruleForm.name);
                // let result = await api.admin.adminLogin(form)
                // json  字符串  引进qs，和更改content-type
                // let result = await api.admin.adminLogin(
                //     qs.stringify({
                //         password: ruleForm.password,
                //         username: ruleForm.name
                //     })
                // )

                console.log(result);
                Cookies.set("token", result.tokenHead + result.token)
                // 可不用写
                // 获取用户信息
                // let adminInfo = await api.admin.getAdminInfo()
                // // console.log(adminInfo);
                // // 获取到的数组(菜单栏)传到pinia
                // useCounterStore().updateMenus(adminInfo.menus)
                // 跳转到首页
                // let router = useRouter()不能写在setup的函数内，应该写在顶层，否则因为作用域的问题会得到undefiend
                router.push("/index")
            }
        })
    }
}

</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2d3a4b;
    color: #fff;
    text-align: center;

    .el-form-item {
        width: 420px;

        // line-height: 50px;
        .el-input {
            height: 50px;
            line-height: 50px;
        }

        :deep .el-input__wrapper {
            background-color: rgba(0, 0, 0, .1);
            box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .1) inset;
        }

        .el-input__prefix-inner {
            font-size: 18px;
            color: #fff;
        }

        :deep .el-input__inner {
            font-size: 20px;
        }
    }

    p {
        font-size: 28px;
        margin-bottom: 20px;
    }

}
</style>